How to Set Up Lexical.js in a React App: A Comprehensive Guide

Lexical.js is a highly extensible, performant text editor framework built by Meta, designed to handle complex editing capabilities with ease. It’s ideal for building rich text editors that can grow alongside your application's needs, especially when paired with React and Vite.js. By using Vite.js as our build tool, we can set up Lexical quickly in a React project, benefiting from Vite’s optimized bundling and fast development server.

Key features of Lexical.js include:

• Modular Design: Customize the editor with plugins and nodes.

• Real-Time Editing: Designed for collaboration and high performance.

• Extensibility: Add custom nodes, commands, and plugins for unique functionality.

In this post, we'll walk through how to set up and integrate Lexical.js in a React project with Vite.js. By the end of this guide, you'll have a basic Lexical editor up and running and understand how to extend it with custom functionality.

Setting Up Your Project

1. Initialize the Project: Start by creating a new Vite project with React.

$ npm create vite@latest lexical-editor --template react
$ cd lexical-editor

2. Install Dependencies: Install the Lexical.js library along with its React bindings.

$ npm install lexical @lexical/react

3. Start the Development Server: You can now run the development server to check that the setup is working correctly.

$ npm run dev

Creating A Basic Lexical Editor Component

1. Create an Editor Component: In the src directory, create a new file called Editor.jsx.

import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
import "./Editor.css"; // Import the CSS file for styling

const editorConfig = {
  namespace: "MyLexicalEditor",
  onError(error) {
    console.error(error);
  },
};

export default function Editor() {
  return (
    <LexicalComposer initialConfig={editorConfig}>
      <RichTextPlugin
        contentEditable={<ContentEditable className="editor-content" />}
        placeholder={<div className="editor-placeholder">Enter some text...</div>}
      />
      <HistoryPlugin />
      <OnChangePlugin onChange={(editorState) => console.log(editorState)} />
    </LexicalComposer>
  );
}

2. Styling the Editor: Create an Editor.css file for basic styling:

.editor-content {
  min-height: 150px;
  border: 1px solid #ccc;
  padding: 10px;
}

.editor-placeholder {
  color: #999;
}

Integrating the Editor in Your App

1. Update App.jsx: Import the Editor component and render it in the App component.

import Editor from "./Editor";

function App() {
  return (
    <div className="App">
      <h1>My Lexical Editor</h1>
      <Editor />
    </div>
  );
}

export default App;

Now you have a working Lexical editor in a Vite-powered React project!

By combining Lexical.js with Vite.js, you’ve set up a lightweight, high-performance text editor in your React project. Vite’s speedy development environment complements Lexical’s flexible editor architecture, making it easier to customize and extend your editor with plugins and commands.

This setup is just the beginning! Explore Lexical’s plugin system, add real-time collaborative features, or create custom nodes for a truly unique text editing experience in your application.